<!--  -->
<template>
  <div class="">
    <h1>测试</h1>
    <div class="divBoxTopBackground">
      <div class="divBox">
        <div class="divBoxOne">
          <img src="../assets/test.png" alt="" />
          <span style="color:white">维护人员资质</span>
        </div>
        <div>
          <bar
            :data="data"
            id="myChart"
            style="width: 376px;height:200px;background:rgb(3,29,81);margin-top:20px"
          ></bar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import bar from "./bar.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    bar,
  },
  data() {
    //这里存放数据
    return {
      data: {
        xAxisData: ["综合代维技能", "电工证书", "登高证书"],
        yAxisData: [774, 652, 589],
      },
    };
  },
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="less" scoped>
.divBoxTopBackground {
  margin: 10px auto;
  width: 450px;
  height: 350px;
  background: rgb(0, 10, 41);
  display: flex;
  .divBox {
    width: 376px;
    height: 307px;
    margin: auto;
    color: white;
    background: rgb(1, 19, 63);
    .divBoxOne {
      height: 60px;
      background-image: linear-gradient(to right, rgb(14, 114, 239), black);
      width: 100%;
      display: flex;
      span {
        font-size: 1.125rem;
        line-height: 60px;
      }
    }
    div:nth-chlid(2) {
      background: lightblue;
    }
  }
}
</style>
